<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

<?php /** @var $this \Magento\Framework\View\Element\Template */ ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getViewFileUrl('prototype/windows/themes/default.css') ?>"/>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getViewFileUrl('mage/translate-inline-vde.css') ?>"/>

<script id="translate-inline-dialog-form-template" type="text/x-jQuery-tmpl">
    <form id="${id}" data-form="translate-inline-dialog-form">
        {{each(i, item) items}}
        <input id="perstore_${i}" name="translate[${i}][perstore]" type="hidden" value="0"/>
        <input name="translate[${i}][original]" type="hidden" value="${escape(item.original)}"/>
        <textarea id="custom_${i}" name="translate[${i}][custom]" data-translate-input-index="${i}">${escape(item.translated)}</textarea>
        {{/each}}
    </form>
</script>

<script data-template="translate-inline-icon" type="text/x-jQuery-tmpl">
  <img src="${img}" height="16" width="16" class="translate-edit-icon">
</script>

<div id="translate-dialog" data-role="translate-dialog"
     data-mage-init='{"loader": {"icon": "<?php echo $this->getViewFileUrl('images/ajax-loader-tr.gif', array('area' => \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE)) ?>"}}'>
 </div>

<script type="text/javascript">
require([
    "jquery",
    "mage/translate",
    "mage/loader_old",
    "mage/bootstrap",
    "mage/edit-trigger",
    "mage/translate-inline",
    "mage/translate-inline-vde"
], function($){
        $(window).load(function() {
            var $body = $('body');
            var $textTranslations = $('[data-translate-mode="text"]');
            var $imageTranslations = $('[data-translate-mode="alt"]');
            var $scriptTranslations = $('[data-translate-mode="script"]');

            <?php if($this->getTranslateMode()): ?>
                $body.addClass('<?php echo 'trnslate-inline-' . $this->getTranslateMode() . '-area' ?>');
            <?php endif; ?>

            /** @todo temporary fix to add data- attribute to body. */
            $body.attr("data-container", "body");

            $('#translate-dialog').translateInlineDialogVde({
                ajaxUrl: '<?php echo $this->getAjaxUrl() ?>',
                area: '<?php echo $this->getArea() ?>',
                translateMode: '<?php echo $this->getTranslateMode() ?>',
                textTranslations: $textTranslations,
                imageTranslations: $imageTranslations,
                scriptTranslations: $scriptTranslations
            });
            var dialogVde = $('#translate-dialog');

            $textTranslations.translateInlineVde({
                img: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon.png') ?>',
                imgHover: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon_hover.png') ?>',
                translateMode: '<?php echo $this->getTranslateMode() ?>',
                onClick: function(e, widget) {
                    $body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
                    $textTranslations.translateInlineVde('hide');
                    dialogVde.translateInlineDialogVde(
                        'openWithWidget',
                        e,
                        widget,
                        $.proxy(widget.replaceText, widget)
                    );
                }
            });

            $imageTranslations.translateInlineImageVde({
                img: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon.png') ?>',
                imgHover: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon_hover.png') ?>',
                translateMode: '<?php echo $this->getTranslateMode() ?>',
                onClick: function(e, widget) {
                    $body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
                    $imageTranslations.translateInlineImageVde('hide');
                    dialogVde.translateInlineDialogVde(
                        'openWithWidget',
                        e,
                        widget,
                        $.proxy(widget.replaceText, widget)
                    );
                }
            });

            $scriptTranslations.translateInlineScriptVde({
                img: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon.png') ?>',
                imgHover: '<?php echo $this->getViewFileUrl('Magento_Core::translate_edit_icon_hover.png') ?>',
                translateMode: '<?php echo $this->getTranslateMode() ?>',
                onClick: function(e, widget) {
                    $body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
                    $scriptTranslations.translateInlineScriptVde('hide');
                    dialogVde.translateInlineDialogVde(
                        'openWithWidget',
                        e,
                        widget,
                        $.proxy(widget.replaceText, widget)
                    );
                }
            });

            parent.jQuery('[data-translate-container]').translateInlineToggle({
                frameUrl: '<?php echo $this->getFrameUrl() ?>',
                refreshVdeCanvas: <?php if ($this->getRefreshCanvas()): ?>false<?php else: ?>true<?php endif; ?>,
                dialogWidgetElement: dialogVde
            });
        });
});
</script>
